<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="dataForm" size="mini" :model="listQuery" label-position="right" label-width="auto">
        <div class="lineBox">
          <el-form-item label="档案日期" prop="pub_time">
            <el-date-picker v-model="listQuery.pub_time" size="mini" value-format="yyyy-MM-dd" type="daterange"
              align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              :picker-options="pickerOptions" />
          </el-form-item>
        </div>
        <div class="lineBox">
          <el-form-item label="标题" prop="title">
            <el-input v-model="listQuery.title" size="mini" placeholder="" style="width: 180px;" />
          </el-form-item>
        </div>

        <div class="lineBox">
          <el-form-item label="是否进队列：" prop="is_queue">
            <el-select v-model="listQuery.is_queue" clearable>
              <el-option label="是" value="1" />
              <el-option label="否" value="2" />
            </el-select>
          </el-form-item>
        </div>

        <div class="lineBox">
          <el-form-item label="模版类型" prop="template_id" clearable>
            <el-select v-model="listQuery.template_id">
              <el-option label="全部" value="0" />
              <el-option v-for="( item ,index ) in templateList" :key="item.id" :label="item.template_name"
                :value="item.id" />
              <el-option label="末命中任何模板" value="-1" />
            </el-select>
          </el-form-item>
        </div>

        <div class="lineBox">
          <el-form-item label="最近抽取的批次号" prop="batch_number">
            <el-input v-model="listQuery.batch_number" size="mini" placeholder="" style="width: 180px;" />
          </el-form-item>
        </div>

        <div class="lineBox">
          <el-form-item label="文章id" prop="cid">
            <el-input v-model="listQuery.cid" size="mini" placeholder="" style="width: 180px;" />
          </el-form-item>
        </div>

        <div class="lineBox">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="myTable" style="min-height: 600px;">
      <el-table :key="tableKey" :data="list" fit size="mini" highlight-current-row style="width: 100%;">
        <el-table-column label="ID" prop="id" align="center" width="50" />
        <el-table-column label="标题" prop="title" align="title" min-width="150" />
        <el-table-column label="档案日期" prop="pub_time" align="center" min-width="100" />
        <el-table-column label="存档编码" prop="batch_number" align="center" min-width="100" />
        <el-table-column label="最近抽取" prop="number" align="center" min-width="100" />
        <el-table-column label="内容抽取结果" prop="number" align="center" min-width="300">
          <template slot-scope="{row,$index}">
            {{ row.json }}
          </template>
        </el-table-column>
        <el-table-column label="是否进队列" prop="is_queue" align="center" min-width="50">
          <template slot-scope="{row,$index}">
            <span v-if="row.is_queue==1">是</span>
            <span v-if="row.is_queue==0">否</span>
          </template>
        </el-table-column>
        <el-table-column label="模板类别" prop="template_name" align="center" min-width="100">
          <template slot-scope="{row,$index}">
            <span v-if="row.template_name">{{ row.template_name }}</span>
            <span v-if="!row.template_name">无</span>
          </template>
        </el-table-column>

        <el-table-column label="内容抽取状态" prop="status" align="center" min-width="100">
          <template slot-scope="{row,$index}">
            <span v-if="row.status==0">待抽取</span>
            <span v-if="row.status==1">已抽取</span>
            <span v-if="row.status==2">抽取为空</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" min-width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="preview(row,$index)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination size="mini" :page-sizes="[10]" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper" @pagination="getList" />
    <addNoticeDlg ref="addNoticeDlg" @getList="getList" />
    <el-dialog title="内容" :visible.sync="dialogVisible" width="60%">
      <div style="font-size: 12px;white-space:pre-wrap" v-html="retrunContent" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { api } from '@/api/template'
import { artApi } from '@/api/art'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {

  components: { Pagination },

  data() {
    return {
      templateList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dialogVisible: false,
      retrunContent: null,
      formInline: {
        user: "",
        region: ""
      },
      value: '',

      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        pageNumber: 1,
        page: 1,
        limit: 10,
        id: null,
        pub_time: null,
        title: null,
        is_queue: null,
        batch_number: null,
        template_id: null,
        cid: null,


      },


    }
  },



  async created() {

    await this.getAllTemplate()
    if (this.$route.query.id) {
      this.listQuery.id = this.$route.query.id
    }


    await this.getList()
  },
  methods: {

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    async getAllTemplate() {

      const url = 'getAllTemplate'
      var res = await api(url, {})
      if (res.code == 200) {
        this.templateList = res.data;
      }
    },

    preview(row) {

      this.retrunContent = row.content

      this.dialogVisible = true;
    },
    // 数据列表
    async getList() {
      this.listLoading = true
      const response = await artApi("getArticleist", this.listQuery)
      if (response.code == 200) {
        this.list = response.data.resultList
        this.total = response.totalCount
        // this.type = response.type
        //   // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      }
    },
    handleUpdate(row) {
      this.$refs.addNoticeDlg.showDialog(row)
    },
    handleCreate() {
      this.$refs.addNoticeDlg.showDialog()
    },

    // 删除指标
    async handleDelete(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = { 'id': row.id }

        const response = await dictionaryApi("delDictionaryById", data)
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: response.message,
            type: 'success',
            duration: 2000
          })
          this.list.splice(index, 1)
        } else {
          this.$notify({
            title: '失败',
            message: response.message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 修改跳转
    async skip(row, index) {

      this.$router.push('/template/save?id=' + row.id)

    }
  }
}
</script>

<style lang="scss" scoped>
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
</style>
